'use client';

// ShadCn
import { AspectRatio } from '@/components/ui/aspect-ratio';

// Components
// import { BaseButton, SendPdfToEmailModal, Subheading } from '@/app/components';
import { BaseButton } from '../../reusable/BaseButton';
import { SendPdfToEmailModal } from '../../modals/email/SendPdfToEmailModal';
import Subheading from '../../reusable/Subheading';

// Contexts
import { useInvoiceContext } from '@/context/InvoiceContext';

// Icons
import { BookmarkIcon, DownloadCloudIcon, Eye, Mail, MoveLeft, Printer } from 'lucide-react';

export function FinalPdf() {
    const {
        //
        pdfUrl,
        removeFinalPdf,
        previewPdfInTab,
        downloadPdf,
        printPdf,
        saveInvoice,
        sendPdfToMail,
    } = useInvoiceContext();

    return (
        <>
            <Subheading>Final PDF:</Subheading>
            <div className="flex items-center mb-3">
                <BaseButton variant={'ghost'} size="sm" onClick={removeFinalPdf}>
                    <MoveLeft className="w-5 h-5" />
                    Back to Live Preview
                </BaseButton>
            </div>

            {/* Buttons */}
            <div className="flex flex-wrap gap-2 my-1">
                <BaseButton tooltipLabel="Preview invoice in new tab" onClick={previewPdfInTab} size="sm" variant={'outline'}>
                    <Eye className="w-5 h-5" />
                    Preview
                </BaseButton>
                <BaseButton tooltipLabel="Download invoice PDF" onClick={downloadPdf} size="sm" variant={'outline'}>
                    <DownloadCloudIcon className="w-5 h-5" />
                    Download
                </BaseButton>

                <BaseButton tooltipLabel="Print invoice" onClick={printPdf} size="sm" variant={'outline'}>
                    <Printer className="w-5 h-5" />
                    Print
                </BaseButton>

                <BaseButton tooltipLabel="Save invoice in website" onClick={saveInvoice} size="sm" variant={'outline'}>
                    <BookmarkIcon className="w-5 h-5" />
                    Save
                </BaseButton>

                <SendPdfToEmailModal sendPdfToMail={sendPdfToMail}>
                    <BaseButton tooltipLabel="Send invoice PDF to mail" size="sm" variant={'outline'}>
                        <Mail className="w-5 h-5" />
                        Send to mail
                    </BaseButton>
                </SendPdfToEmailModal>
            </div>
            {/* @ts-ignore */}
            <AspectRatio ratio={1 / 1.4}>
                <iframe className="h-full w-full rounded-xl" src={`${pdfUrl}#toolbar=0`} />
            </AspectRatio>
        </>
    );
}
